<template>
  <div class="page-pay">
    <header-gray header-title="结算付款" back="true"></header-gray>
    <div class="main">
      <mt-radio v-bind:title="titlemsg" align="right" v-model="value" :options="options">
      </mt-radio>
      <div class="pay-good">
        <label class="mint-radiolist-title">商品明细</label>
        <mt-cell title="冲锋衣">
          <span>x2 ￥100</span>
          <img slot="icon" src="https://dummyimage.com/100x100/ff0a0a/000000" width="24" height="24">
        </mt-cell>
         <mt-cell title="冲锋衣">
          <span>x2 ￥100</span>
          <img slot="icon" src="https://dummyimage.com/100x100/ff0a0a/000000" width="24" height="24">
        </mt-cell>
         <mt-cell title="冲锋衣">
          <span>x2 ￥100</span>
          <img slot="icon" src="https://dummyimage.com/100x100/ff0a0a/000000" width="24" height="24">
        </mt-cell>
      </div>
      <div class="pay-all">
      <label class="mint-radiolist-title">费用明细</label>
        <mt-cell title="商品总额" value="￥200"></mt-cell>
        <mt-cell title="配送费" value="￥5"></mt-cell>
        <mt-cell title="服务费" value="￥0"></mt-cell>
        <mt-cell title="优惠劵" value="￥0"></mt-cell>
      </div>
    </div>
    <div class="footer-pay">
      <div class="pay-total">应付金额：￥20</div>
      <div class="pay-btn">确认下单</div>
    </div>
  </div>
</template>
<script type="text/javascript">
import HeaderGray from 'components/Header-gray/Header-gray'
export default {
  components: {
    HeaderGray
  },
  data () {
    return {
      options: [],
      value: 'wechat',
      titlemsg: '请选择支付方式'
    }
  },
  created () {
    this.options = [{
      label: '微信',
      value: 'wechat'
    },
    {
      label: '支付宝',
      value: 'alipay'
    },
    {
      label: '零钱',
      value: 'money'
    }
    ]
  }
}

</script>
<style lang="less" scoped>
.footer-pay {
  position: fixed;
  bottom: 0;
  left: 0;
  color: #000;
  height: 5rem;
  width: 100%;
  display: flex;
}

.pay-total {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pay-btn {
  width: 10rem;
  background: green;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  color: #fff;
}

</style>
